<template>
  <div>
    <div class="top">
      <div></div>
      <div class="top-right">
<!--        <div style="color: #dc1917;">登录</div>-->
<!--        <div style="margin-left: 5px; margin-right: 5px; color: #dc1917;">-->
<!--          /-->
<!--        </div>-->
<!--        <div style="color: #dc1917;">注册</div>-->
        <div style="margin-left: 20px;">
          全国客服电话：400-822-1758
        </div>
      </div>
    </div>
    <div class="header">
      <div class="header-box">
        <img src="../assets/images/logo.png" class="" />
        <div class="header-right">
          <el-menu
            :default-active="activeIndex"
            active-text-color="#DC1917"
            class="el-menu-demo"
            mode="horizontal"
            @select="handleSelect"
          >
            <el-menu-item index="-1" @click="goHome">首页</el-menu-item>
            <template v-for="(tab, index) in tablist">
              <el-submenu v-if="tab.children && tab.value!=102" :index="String(index)" :key="String(index)">
                <template slot="title" >{{tab.label}}</template>
                <template v-for="(tab2, index2) in tab.children">
                  <el-menu-item v-if="tab2.value!=120 && tab2.value!=121 && tab2.value!=110 && tab2.value!=131 && tab2.value!=113 && tab2.value!=112 && tab2.value!=111 && tab2.value!=133" @click="goPath(tab2)" :index="String(index)+'-'+String(index2)" :key="String(index2)">{{tab2.label}}</el-menu-item>
                </template>
              </el-submenu>
              <el-menu-item v-else-if="tab.value!=102" @click="goPath(tab)" :index="String(index)" :key="String(index)">{{tab.label}}</el-menu-item>
            </template>
          </el-menu>
<!--          <el-button type="danger" v-if="userinfo">{{userinfo.username}}</el-button>-->
<!--          <div v-if="getuserinfo" style="line-height: 40px;font-size: 14px;color: #dc1917; ">{{ getuserinfo }} | <span style="font-size: 14px;">退出</span></div>-->
<!--          <el-button type="danger" @click="login" v-else>登录</el-button>-->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getClassAll } from "@/utils/serve/classify";
export default {
  name: "HelloWorld",
  props: {},
  data() {
    return {
      activeIndex: "-1",
      tablist: [],
      // userinfo: this.getuserinfo()
    };
  },
  mounted() {
    this.getClassAllReturnList();
  },
  computed:{
    getuserinfo(){
      return this.$store.state.user.userInfo.username;
    }
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    goHome(){
      this.$emit('goHome','/')
    },
    goPath(e){
      this.$emit("goPath", e);
      // if(tab.type==2){
      //   this.$emit("goPath", {
      //     name: 'ReadReadPdf',
      //     id: tab.id
      //   })
      // }else{
      //   this.$emit("goPath", {
      //     name: 'ReadList',
      //     id: tab.id
      //   })
      // }

    },
    login(){
      this.$emit('login',0)
    },
    // 获取导航信息
    getClassAllReturnList(){
      getClassAll( res=>{
        console.log("导航信息返回值",res)
        if(res.code == 0){
          this.tablist = res.data;
        }
      })
    }

  },
};
</script>

<style scoped>
.top {
  width: 1200px;
  margin: 0 auto;
  display: flex;
  font-size: 12px;
  height: 30px;
  line-height: 30px;
  justify-content: space-between;
}
.top-right {
  display: flex;
}
.header {
  width: 100%;
  background-color: #ffffff;
  padding-top: 13px;
  padding-bottom: 13px;
}
.header-box {
  width: 1200px;
  margin: 0 auto;
  display: flex;
  font-size: 12px;
  justify-content: space-between;
  background-color: #ffffff;
}
.header-box img {
  width: 158px;
  height: 42px;
}
.header-right {
  display: flex;
}
.el-menu.el-menu--horizontal {
  border-bottom: 0;
}
.el-menu--horizontal > .el-menu-item.is-active {
  border-bottom: 0;
}
.el-menu--horizontal > .el-menu-item {
  height: 42px;
  line-height: 42px;
  color: #000000;
  border-bottom: 0;
}
/deep/.el-menu--horizontal > .el-submenu .el-submenu__title {
  height: 42px;
  line-height: 42px;
}
/deep/.el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
  border-bottom: 0;
}
/deep/.el-menu--horizontal > .el-submenu .el-submenu__title {
  color: #000000;
  border-bottom: 0;
}
.login-btn {
  background-color: #dc1917;
  color: #ffffff;
  width: 100px;
  border-radius: 4px;
  font-size: 14px;
  height: 42px;
  line-height: 42px;
}
</style>
